<template>
	<!-- 投资计划编制 -->
	<div class="">
		<el-form
				ref="formRef"
			 :inline="true"
			 label-width="180px"
			 :model="form"
			 :rules="rules"
			 v-loading="isLoading"
			element-loading-text="表单数据提交中..."
		>
		<CommonTitle titleName="投资信息"></CommonTitle>
		<div class="investment">
				<el-row>
					<el-col :span="12">
						<el-form-item label="形象总额(元)" prop="imageFunds">
							<el-input v-model="form.imageFunds"  placeholder="请输入形象总额" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="支付总额(元)" prop="payFunds">
							<el-input v-model="form.payFunds"  placeholder="请输入支付总额" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="财政拨款(元)" prop="investFinancialProvision">
							<el-input v-model="form.investFinancialProvision"  placeholder="请输入财政拨款" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="对外募集资金(元)" prop="raiseFunds">
							<el-input v-model="form.raiseFunds"  placeholder="请输入对外募集资金" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="自有资金(元)" prop="ownFunds">
							<el-input v-model="form.ownFunds"  placeholder="请输入自有资金" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="其他投资(元)" prop="otherFunds">
							<el-input v-model="form.otherFunds"  placeholder="请输入其他投资" />
						</el-form-item>
					</el-col>
				</el-row>
		</div>

		<CommonTitle class="m-t20" titleName="融资信息"></CommonTitle>
		<div class="financing">
				<el-row>
					<el-col :span="12">
						<el-form-item label="融资总额(元)" prop="financingAmount">
							<el-input v-model="form.financingAmount"  placeholder="请输入融资总额" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="银行贷款(元)" prop="bankLoan">
							<el-input v-model="form.bankLoan"  placeholder="请输入银行贷款" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="财政拨款(元)" prop="financialProvision">
							<el-input v-model="form.financialProvision"  placeholder="请输入财政拨款" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="企业债券(元)" prop="corporateBond">
							<el-input v-model="form.corporateBond"  placeholder="请输入企业债券" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="非银行金融机构融资(元)" prop="nonBankLoan">
							<el-input v-model="form.nonBankLoan"  placeholder="请输入非银行金融机构融资" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="股权融资(元)" prop="equityFinancing">
							<el-input v-model="form.equityFinancing"  placeholder="请输入股权融资" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="其他融资(元)" prop="otherFinancing">
							<el-input v-model="form.otherFinancing"  placeholder="请输入其他融资" />
						</el-form-item>
					</el-col>
				</el-row>
    </div>

    <div class="footer m-t20">
        <el-button @click="onCancel" class="button_cancel2">取消</el-button>
        <el-button @click="onSubmit()" class="button_view">{{status===1?'编辑':'提交'}}</el-button>
    </div>
		</el-form>
	</div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import CommonTitle from "@/components/CommonTitle.vue";
import {ElForm, ElRow, ElCol, ElButton, ElLoading, ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {investmentProjects} from "@/api/investment";

const router = useRouter();
const getProjectId = router.currentRoute.value.params.id;
const state = reactive({});
const form = reactive({
	projectId:  getProjectId,
	imageFunds: '',
	payFunds: '',
	investFinancialProvision: '',
	raiseFunds: '',
	ownFunds: '',
	otherFunds: '',
	financingAmount: '',
	bankLoan: '',
	financialProvision: '',
	corporateBond: '',
	nonBankLoan: '',
	equityFinancing: '',
	otherFinancing: ''
});
const rules = reactive({
	imageFunds: [
		{ required: true, message: '请输入形象总额', trigger: 'blur' },
	],
	payFunds: [
		{ required: true, message: '请输入支付总额', trigger: 'blur' },
	],
	investFinancialProvision: [
		{ required: true, message: '请输入投资财政拨款', trigger: 'blur' },
	],
	raiseFunds: [
		{ required: true, message: '请输入募集资金', trigger: 'blur' },
	],
	ownFunds: [
		{ required: true, message: '请输入自有资金', trigger: 'blur' },
	],
	otherFunds: [
		{ required: true, message: '请输入其他投资金额', trigger: 'blur' },
	],
	financingAmount: [
		{ required: true, message: '请输入融资金额', trigger: 'blur' },
	],
	bankLoan: [
		{ required: true, message: '请输入银行贷款', trigger: 'blur' },
	],
	financialProvision: [
		{ required: true, message: '请输入融资财政拨款', trigger: 'blur' },
	],
	corporateBond: [
		{ required: true, message: '请输入企业债券', trigger: 'blur' },
	],
	nonBankLoan: [
		{ required: true, message: '请输入非银行金融机构融资', trigger: 'blur' },
	],
	equityFinancing: [
		{ required: true, message: '请输入股权融资', trigger: 'blur' },
	],
	otherFinancing: [
		{ required: true, message: '请输入其他融资', trigger: 'blur' },
	],
});

/**
 * 提交表单
 */
const formRef = ref(null);
const isLoading = ref(false);
const onSubmit = () => {
	formRef.value.validate((valid, fields) => {
		if (valid) {
			isLoading.value = true;
			investmentProjects.addProjectInvestmentInfo(form).then(res=>{
				if(res.code === '200'){
					isLoading.value = false;
					ElMessage.success('提交成功!');
					router.push({path:`/investmentProjectManagement/investmentProjects/investmentProjectInformation/investmentProjectsList`});
				}else{
					isLoading.value = false;
					ElMessage.error('提交失败!请联系管理员。');
				}
			});
		} else {
			console.log('error submit!', fields)
		}
	});
}

/**
 * 获取投资详情
 * @param projectId
 */
const status = ref(0);
const getPlanDetail = (projectId) => {
	investmentProjects.getPlanDetail(projectId).then(res=>{
		if(res.code && res.data){
			status.value = 1;
			for (let key in res.data){
				form[key] = res.data[key];
			}
		}
	});
}

/**
 * 取消
 */
const onCancel = () => {
	router.push({path:`/investmentProjectManagement/investmentProjects/investmentProjectInformation/investmentProjectsList`});
}

onMounted(()=>{
	getPlanDetail(getProjectId);
});
</script>


<style lang="scss" scoped>
.investment ,.financing {
	width: 100%;
	height: 252px;
	border-radius: 10px;
	border: 1px solid #e3e7f1;
  padding: 34px 90px 34px 14px;
}
.financing {
  
height: 324px;
}

.el-form-item {
  width: 100%;
}

.footer {
  text-align: center;
}
</style>
